<template>
    <div class="cart-bar">
     <div class="cart-button">
         <check-button class="check-botton" :is-checked="isSelectAll" @click.native="checkClick"></check-button>
         <span>全选</span>
     </div>
     <div class="price">总计:¥{{totalPrice}}</div>
     <div class="calc">
         去计算:({{length}})
     </div>
    </div>
</template>
<script>
import CheckButton from 'components/checkButton/CheckButton.vue'
export default {
  components: {
      CheckButton
      },
    name:"CartBottonBar",
  computed:{
      totalPrice(){
          return this.$store.state.CartList.filter(item=>{
            return item.checked
          }).reduce((preValue,item)=>{
            return preValue + item.price*item.count
          },0).toFixed(2)
      },
     length(){
         return this.$store.state.CartList.filter(item=>item.checked).length
     },
    isSelectAll(){
        if(this.$store.state.CartList.length===0)return false;
        return !(this.$store.state.CartList.find(item=>!item.checked))
    }
  },
  methods:{
    checkClick(){
      if(this.isSelectAll){
        this.$store.state.CartList.forEach(item=>item.checked=false)
      }else {
        this.$store.state.CartList.forEach(item=>item.checked=true)
      }
    }
  }
}
</script>
<style scoped>
 .cart-bar{
     display:flex;
     height: 40px;
     width: 100%;
     background: #eee;
     position: fixed;
     bottom: 49px;
     background: #eee;
     z-index: 9;
    justify-content: space-between;

 }
 .cart-button{
   margin-left: 5px;
   display: flex;
   align-items:center;

 }
 .cart-button span{
   margin-left: 5px;
 }
 .price{
 /*margin-left: 15px;*/
 line-height: 40px;
 }
 .calc{
  color: white;
  background: red;
  font-size: 15px;
   line-height: 40px;
 }
</style>
